window.addEventListener('load',function(){
    var focus = document.querySelector('.focus');
    var ol = focus.children[1];
    var ul = focus.children[0];
    //获得focus的宽度
    var  w =focus.offsetWidth;
    //开启定时器
    var index = 0;
    var timer = setInterval(function(){
        index++;
        var translatex = -index * w;
        ul.style.transition = 'all.3s'//过渡效果有时间消耗
        ul.style.transform = 'translateX('+translatex+'px)';
    },2000)
    //等着过渡完成之后再去判断  监听过渡完成的时间  transitionend
    ul.addEventListener('transitionend',function(){
        if(index >= 3){
            index = 0;
            ul.style.transition = 'none';//去掉过渡效果有时间消耗
            //利用最新的索引去翻滚图片
            var translatex = -index * w ;
            ul.style.transform = 'translateX('+translatex+'px)'
        }else if (index < 0 ){
            index = 2;
            ul.style.transition = 'none';//去掉过渡效果有时间消耗
            //利用最新的索引去翻滚图片
            var translatex = -index * w ;
            ul.style.transform = 'translateX('+translatex+'px)'
        }
         //小圆点跟随变化
         //把ol里面li带有current 类名的选出来去掉类名  remove
         ol.querySelector('li.current').classList.remove('current');
        //  让当前索引号的小li 加上 current   add
        ol.children[index].classList.add('current');

    });
    //classList属性 ：返回元素的类名
    //给元素添加类名 element.classList.add('')
    //给元素移除一个类名  element.classList.remove('')
    /*切换类名  element.classList.toggle(''); 比如用于切换样式 
      调用一次就变成这个类名 再调用一次就去掉这个类名*/

      //手指滑动轮播图
      //触摸元素 touchstar  获取手指初始坐标
      var startX = 0;
      var moveX = 0;
      ul.addEventListener('touchstart',function(e){
         startX = e.targetTouches[0].pageX;
         clearInterval(timer);
      })

      ul.addEventListener('touchend',function(e){
        //如果移动距离大于了五十像素,则播放上一张或者下一张图片
         if(Math.abs(moveX) >50 ){
            //如果是右滑 播放上一张  moveX为正值
            //如果是左滑 播放上一张  moveX为负值
            if(moveX > 0){
                index--;
            }else{
                index++;
            }
            var translatex = -index * w;
            ul.style.transition = 'all.3s'//过渡效果有时间消耗
            ul.style.transform = 'translateX('+translatex+'px)';
         }else{
            var translatex = -index * w;
            ul.style.transition = 'all.3s'//过渡效果有时间消耗
            ul.style.transform = 'translateX('+translatex+'px)';
         }
      })
      //移动手指 touchmove 计算手指滑动的距离
      ul.addEventListener('touchmove',function(e){
          //计算移动距离
            moveX = e.targetTouches[0].pageX - startX;
            //移动盒子:盒子原来的位置 + 手指移动的位置
            var translateX = -index * w +moveX;
            //手指拖动时不需要过渡效果 
            ul.style.transition = 'none';
            //移动
            ul.style.transform = 'translateX('+translateX+'px)';
            e.preventDefault();
      })

      //返回顶部模块制作
      var goback = document.querySelector('.goBack');
      var nav = document.querySelector('nav');
      window.addEventListener('scroll',function(){
          if(window.pageYOffset >= nav.offsetTop){
              goback.style.display = 'block'
          }else{
            goback.style.display = 'none';
          }
      })

      goback.addEventListener('click',function(){
          window.scroll(0,0);
      })

      

})